<!--
 * Description: CBOM对比
 * Company: 联宝（合肥）电子科技有限公司
 * Author: Qiuxue.Wu
 * Date: 2020/10/15 15:26
-->

<template>
  <BaseWrap v-loading="isRequesting">
    <div class="compare-top">
      <!-- --------------------- left start -------------------------------- -->
      <!--Project-->
      <el-select
        v-model="compareForm.leftProject"
        class="top-input"
        clearable
        filterable
        placeholder="Project"
        size="small"
        style="width:160px;height:30px"
      >
        <el-option
          v-for="item in projectList"
          :key="item.projectId"
          :label="item.projectName"
          :value="item.projectId"
        />
      </el-select>
      <!-- Tracking Sku -->
      <el-input
        v-model="compareForm.leftTrackingSku"
        class="top-input"
        disabled
        placeholder="Tracking Sku"
        size="small"
        style="width:160px;height:30px;margin-left:6px"
      />
      <!-- CBOM Version -->
      <el-select
        v-model="compareForm.leftCbomVersion"
        class="top-input"
        clearable
        filterable
        placeholder="CBOM Version"
        size="small"
        style="width:160px;height:30px;margin-left:6px"
      >
        <el-option
          v-for="item in compareForm.leftTrackingSkuList"
          :key="item.createTime"
          :label="item.cbomVersion"
          :value="item.cbomVersion"
        />
      </el-select>
      <!-- --------------------- left end -------------------------------- -->
      <div class="vs">vs</div>
      <!-- --------------------- right start -------------------------------- -->

      <!--Project-->
      <el-select
        v-model="compareForm.rightProject"
        class="top-input"
        clearable
        filterable
        placeholder="Project"
        size="small"
        style="width:160px;height:30px"
      >
        <el-option
          v-for="item in projectList"
          :key="item.projectId"
          :label="item.projectName"
          :value="item.projectId"
        />
      </el-select>

      <!-- Tracking Sku -->
      <el-input
        v-model="compareForm.rightTrackingSku"
        class="top-input"
        disabled
        placeholder="Tracking Sku"
        size="small"
        style="width:160px;height:30px;margin-left:6px"
      />

      <!-- CBOM Version -->
      <el-select
        v-model="compareForm.rightCbomVersion"
        class="top-input"
        clearable
        filterable
        placeholder="CBOM Version"
        size="small"
        style="width:160px;height:30px;margin-left:6px"
      >
        <el-option
          v-for="item in compareForm.rightTrackingSkuList"
          :key="item.createTime"
          :label="item.cbomVersion"
          :value="item.cbomVersion"
        />
      </el-select>
      <!-- --------------------- right end -------------------------------- -->

      <el-button
        v-if="$hasPer('compare')"
        icon="el-icon-copy-document"
        plain
        size="small"
        style="margin-left:10px"
        type="primary"
        @click="handlerCompare"
      >
        {{ $t('button.compare') }}
      </el-button>

      <el-select v-model="queryType" class="query-type" placeholder="请选择" size="small">
        <el-option v-for="item in queryTypeList" :key="item" :label="item" :value="item" />
      </el-select>
    </div>
    <div class="compare-bottom">
      <CompareTable ref="compareTable" :queryType="queryType" />
    </div>
  </BaseWrap>
</template>
<script>
import { projectSimpleList } from '@/api/quote/project'
import { cbomInfoList, cbomInfoDetailListAll, cbomInfoDetailLeafList } from '@/api/cbom/info'

import CompareTable from './components/CompareTable'

export default {
  name: 'CbomCompare',

  components: { CompareTable },

  data() {
    return {
      projectList: [],

      isRequesting: false,

      compareForm: {
        leftProject: '',
        leftTrackingSku: '',
        leftCbomVersion: '',
        leftTrackingSkuList: [],
        rightProject: '',
        rightTrackingSku: '',
        rightCbomVersion: '',
        rightTrackingSkuList: []
      },

      queryTypeList: [
        '全局格式',
        '底层格式',
        '展开到采购件及以下',
        '只展开到采购件',
        '只显示ME、EE、PKG'
      ],

      queryType: '全局格式'
    }
  },

  watch: {
    'compareForm.leftProject': {
      async handler(newVal) {
        try {
          const result = await cbomInfoList({ projectId: newVal })
          if (result.data.length > 0) {
            this.compareForm.leftTrackingSku = result.data[0].trackingSku
            this.compareForm.leftTrackingSkuList = result.data
            this.compareForm.leftCbomVersion = ''
          } else {
            this.compareForm.leftCbomVersion = ''
            this.compareForm.leftTrackingSku = ''
            this.compareForm.leftTrackingSkuList = []
          }
        } catch (error) {
          console.log(error)
        }
      }
    },
    'compareForm.rightProject': {
      async handler(newVal) {
        try {
          const result = await cbomInfoList({ projectId: newVal })
          if (result.data.length > 0) {
            this.compareForm.rightTrackingSku = result.data[0].trackingSku
            this.compareForm.rightTrackingSkuList = result.data
            this.compareForm.rightCbomVersion = ''
          } else {
            this.compareForm.rightCbomVersion = ''
            this.compareForm.rightTrackingSku = ''
            this.compareForm.rightTrackingSkuList = []
          }
        } catch (error) {
          console.log(error)
        }
      }
    }
  },

  created() {
    /** 加载专案 */
    this.getProjectList()
  },

  methods: {
    /** 加载专案 */
    async getProjectList() {
      try {
        const res = await projectSimpleList({})
        this.projectList = res.data
      } catch (error) {
        console.log(error)
      }
    },

    async getCbom({ project, trackingSku, cbomVersion }) {
      try {
        let result = []
        if (this.queryType === '全局格式') {
          result = await cbomInfoDetailListAll({ project, trackingSku, cbomVersion })
        } else {
          result = await cbomInfoDetailLeafList({ project, trackingSku, cbomVersion })
        }
        return result.data
      } catch (error) {
        console.log(error)
      }
    },

    /** 开始比较 */
    async handlerCompare() {
      try {
        this.isRequesting = true
        const left = await this.getCbom({
          project: this.compareForm.leftProject,
          trackingSku: this.compareForm.leftTrackingSku,
          cbomVersion: this.compareForm.leftCbomVersion
        })
        const right = await this.getCbom({
          project: this.compareForm.rightProject,
          trackingSku: this.compareForm.rightTrackingSku,
          cbomVersion: this.compareForm.rightCbomVersion
        })
        this.$refs.compareTable.startCompare(left, right)
      } catch (error) {
        console.log(error)
      } finally {
        this.isRequesting = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.compare-top {
  height: 60px;
  text-align: left;
  display: flex;
  align-items: center;
  .vs {
    width: 80px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 600;
    color: #333;
  }
  .top-input {
    width: 10% !important;
  }
}

.compare-bottom {
  height: calc(100% - 60px);
  // background-color: red;
}

.query-type {
  position: absolute;
  right: 0;
  width: 10%;
}
</style>
